<template>
  <div class="logList">
    <div class="sticky">
      <div class="tab-list flex pdl_20 pdt_10 pdr_20">
        <Tab 
          class="mgr_10" 
          v-for="(item, index) in tabList" :key="index"
          :badgeText="item.number"
          :isActive="activeIndex === index"
          @click="activeIndex = index"
        >{{ item.name }}</Tab>
      </div>
      <div class="search-div">
        筛选项
      </div>
    </div>
    <div class="content">
      <div style="background-color: white;">
        <el-table :data="dataTable.list" border stripe style="width: 100%;">
          <el-table-column v-for="(item, index) in dataTable.columns" :key="index"
            :prop="item.prop"
            :label="item.label"
            :minWidth="item.minWidth"
            :formatter="item.formatter"
          >
            <template #default="{ row }" v-if="item.slotName==='message'">
              <span class="ellipsis_1">{{ row.message }}</span>
            </template>
          </el-table-column>
          <el-table-column 
            align="center"
            label="操作"
            width="140px"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" plain @click="dataTable.onViewDetail(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <LogDetailDialog 
      v-model:show="dataLogDetailDialog.show"
      :info="dataLogDetailDialog.info"
    ></LogDetailDialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, shallowReactive } from 'vue';
import Tab from './components/Tab.vue';
import { getCodeErrorList } from '@/api/lotList';
import { ProjectBlackList } from 'monitor-sdk';
import LogDetailDialog from './components/LogDetailDialog.vue';

const tabList = computed(() => {
  return [
    {
      name: '代码异常',
      number: 200,
    },
    {
      name: '数据异常',
      number: 40,
    },
    {
      name: '接口异常',
      number: 30,
    },
  ]
})

const activeIndex = ref(0);

const dataTable = shallowReactive({
  list: [],
  columns: [
    { prop: 'updateTime', label: '最近出现日期', minWidth: '190px' },
    { prop: 'createTime', label: '首次出现日期', minWidth: '190px' },
    { prop: 'projectFlag', label: '项目类型', minWidth: '110px', formatter: (row: any) => ProjectBlackList[row.projectFlag] },
    { prop: 'logType', label: '错误分类', minWidth: '100px' },
    { prop: 'browserUrl', label: '所在路径', minWidth: '200px' },
    { prop: 'message', label: '错误信息', minWidth: '400px', slotName: "message" },
    { prop: 'times', label: '累计出现次数', minWidth: '130px' },
    { prop: 'account', label: '账号', minWidth: '140px' },
    { prop: 'tabFlag', label: '标签页唯一标识', minWidth: '160px' },
    { prop: 'fingerPrint', label: '浏览器指纹', minWidth: '160px' },
    
  ],
  async getData() {
    const res = await getCodeErrorList({
      pageSize: 10,
      currentPage: 1,
    });
    if (res.success) {
      dataTable.list = res.data.list;
    }
  },
  onViewDetail(row: any) {
    dataLogDetailDialog.show = true;
    dataLogDetailDialog.info = row;
    console.log('row', row);
  },
})

const dataLogDetailDialog = shallowReactive({
  show: false,
  info: {},
})

onMounted(() => {
  dataTable.getData();
})

</script>

<style lang="scss" scoped>
.logList {
  .sticky {
    position: sticky;
    top: 0;
    background-color: white;
  }
  .tab-list {
    width: 100%;
    border-bottom: 1px solid rgb(224, 220, 229);
  }
  .search-div {

  }
  .content {

  }
}
</style>
